<!DOCTYPE html>
<!-- saved from url=(0078)http://47.97.127.120/esb-monitor/report/mamagement/monitoring/queue?lang=zh_CN -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>队列监控</title>
<link href="../../plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../plugins/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<link href="../../plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="../../css/Servicehomepage.css" rel="stylesheet">
<script src="../../js/jquery-2.2.4.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script src="../../plugins/layer/layer.js"></script><link rel="stylesheet" href="./layer(1).css" id="layuicss-skinlayercss">
<script src="../../plugins/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> 
<script src="../../js/prompt.js"></script>
<script src="../../js/reportCommon.js"></script>
<style>
html,body {
	
	height: 95%;
	margin: 0px;
	padding: 0px;
}

#main {
	height: 72%;
}

.breadcrumb {
	display: inline-block;
	background-color: #fff;
	font-size: 20px;
	font-weight: bold;
	margin-left: 30px;
	margin-top: 20px;
	margin-bottom: 0px;
}

.breadcrumb>.active {
	color: #333333;
}

.breadcrumb .ics {
	margin-top: 0px;
}
th,td{
 text-align: center;
}
.tdl{
	width:15%;
}
 .th7{
 width:14%;
 }
.th2,.th10{
width:10%;
}
 
</style>
</head>
<body>

	<div id="alert"></div>
	<div class="Contents clear">
		<ol class="breadcrumb">
			 <li class="active"> <i class="ics"></i>平台监控</li>
			<li class="active">ESB监控</li>
			<li class="active">队列监控</li>
		</ol>
		 <i class="line" style="margin-bottom: 20px;"></i> 
	</div>
	
	<div style=" position: absolute;  top: 50%;  left: 50%;transform: translate(-50%, -50%); z-index:99;">
	<img id="serverLoading" src="./loading-0.gif" style="display: none;"></div>

	<div style="width:95%;margin:auto" id="esbQueue"><div class="col-sm-12"><div name="panel_1ESB_IN" class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">ESB_IN（127.0.0.1）<lable name="lable_1ESB_IN">暂无信息</lable></h3></div><div class="panel-body" name="body_1ESB_IN"></div></div></div><div class="col-sm-12"><div name="panel_1ESB_OUT" class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">ESB_OUT（127.0.0.1）<lable name="lable_1ESB_OUT"></lable></h3></div><div class="panel-body" name="body_1ESB_OUT"><table class="table table-striped"><thead><tr><th class="th1">队列名称</th><th class="th2">类型</th><th class="th3">打开输入</th><th class="th4">打开输出</th><th class="th5">队列深度</th><th class="th6">最大队列深度</th><th class="th7">最大队列长度（B）</th><th class="th8">放入消息</th><th class="th9">取出消息</th><th class="th10">集群名称</th></tr></thead><tbody><tr><td class="tdl">PRO.GET.MQ018</td><td>QLOCAL</td><td>2</td><td>0</td><td>14</td><td>10000</td><td>104857600</td><td>启用</td><td>启用</td><td>ESB_CLUS1</td></tr></tbody></table></div></div></div><div class="col-sm-12"><div name="panel_1ESB_QM01" class="panel panel-info"><div class="panel-heading"><h3 class="panel-title">ESB_QM01（127.0.0.1）<lable name="lable_1ESB_QM01">暂无信息</lable></h3></div><div class="panel-body" name="body_1ESB_QM01"></div></div></div></div>

	<script>
var serverArr = new Array();
var maxlen;
var indexlen;
var config={};

$(function() { 
  $.getJSON("../../../config/monitor-config.json",function(data){
		config =data;	
		 getServerIp(); 	
		setInterval(function() {//10秒更新		
		 	createESB(); 
		  },(config.mamagement.queueMonitoring.intervaltime||10)*1000);  	
	});
});

function getServerIp(){
 
//获取所有服务IP地址
$.ajax({
        url: '../../../report/esbQueueServerData',
        type: 'post',
        dataType: 'json',
        data: {},
        timeout: (config.mamagement.queueMonitoring.timeout||10)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        	$('#serverLoading').css("display", "none");
		    promptError($('#alert'), XMLHttpRequest, textStatus); 
        },
        success: function(result) {
        indexlen = 0; 
	    if (result.code == "0") {
	    	var len = result.data.length;
	    		
	    	if(len>0){//有数据   
	    		 for(var i=0;i<len;i++){
	    		 	
	    		 	if(serverArr.indexOf(result.data[i].ip)==-1){
	    		 		serverArr.push(result.data[i].ip);
	    		 	}
	    		 	createQueue(result.data[i],serverArr.indexOf(result.data[i].ip)+1); 
	    		 }
	    	 	createESB(); 
	    	}else{ 
	    		$('#serverLoading').css("display", "none");		
	    		promptInformation($("#alert"),3,'平台暂未配置相关基础信息');
	    	}  
	    	
	    }else{
	    	$('#serverLoading').css("display", "none");
	    	promptInformation($("#alert"),3,'平台暂未配置相关基础信息');
	    }
   	}
  });
}

function createQueue(queue,i){
	var queueHtml = "";
	queueHtml = '<div class="col-sm-12"><div name="panel_'+ i + queue.qmName  + '"  class="panel panel-success"><div class="panel-heading" >'+
	'<h3 class="panel-title">' + queue.qmName + 
	'（' + queue.ip + '）<lable name="lable_'+ i + queue.qmName  + '"></lable></h3></div><div class="panel-body"   name="body_'+ i + queue.qmName  + '"> </div></div>';
	$('#esbQueue').append(queueHtml); //拼装页面      

}

function createESB(){
	
	var len = serverArr.length;
	maxlen = len;    
	for(var i=0;i<len;i++){
		 getEsbQueue(serverArr[i],i+1);
	}
	
}
//获取ESB队列信息
function getEsbQueue(ip,i) {

	$.ajax({
        url: '../../../report/esbQueueData',
        type: 'post',
        dataType: 'json',
        data: {
        	ip:ip,
        	depth: config.mamagement.queueMonitoring.depth||10//默认为大于等于10
        },
        timeout:  (config.mamagement.queueMonitoring.timeout||10)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        	indexlen++;    
        	$("div[name^='body_"+i+"']").empty(); 
        	$("div[name^='panel_"+i+"']").removeClass().addClass("panel panel-danger");
        	$("lable[name^='lable_"+i+"']").html('获取信息失败');
        	if(maxlen==indexlen){
        
        		$('#serverLoading').css("display", "none");
        	}
        },
        success: function(result) {
        	indexlen++;   
        	$("div[name^='body_"+i+"']").empty(); 
        	if(maxlen==indexlen){
        		$('#serverLoading').css("display", "none");
        	}   
        	  
       		 if(result.code==0){
       		
			 	$("lable[name^='lable_"+i+"']").html("");  
       		 	for(var j=0;j<result.data.length;j++){
       		 	  
       		 		if(result.data[j].code==1){
       		 	
       		 			$("div[name='panel_"+i+result.data[j].qmName+"']").removeClass().addClass("panel panel-danger");
        				$("lable[name='lable_"+i+result.data[j].qmName+"']").html('未启用');
       		 		}else{
       		 			createTable(result.data[j],i);
       		 		}
       		 	}    		 	
       		 }else{
       		  
       		 	$("div[name^='panel_"+i+"']").removeClass().addClass("panel panel-danger");
        		$("lable[name^='lable_"+i+"']").html('获取信息失败');
       		 }
        	
        }
     });   
}

function createTable(data,i){
	
	var len = data.qmData.length;
 
	if(len==0){
		$("div[name='panel_"+i+data.qmName+"']").removeClass().addClass("panel panel-info");
        $("lable[name='lable_"+i+data.qmName+"']").html('暂无信息');
	 
	}else{
		$("div[name='panel_"+i+data.qmName+"']").removeClass().addClass("panel panel-success");
        $("lable[name='lable_"+i+data.qmName+"']").html("");
        
		var table = '<table class="table table-striped"><thead><tr>'
		+'<th class="th1">队列名称</th>'
		+'<th class="th2">类型</th>'
		+'<th class="th3">打开输入</th>'
		+'<th class="th4">打开输出</th>'
		+'<th class="th5">队列深度</th>'
		+'<th class="th6">最大队列深度</th>'
		+'<th class="th7">最大队列长度（B）</th>'
		+'<th class="th8">放入消息</th>'
		+'<th class="th9">取出消息</th>'
		+'<th class="th10">集群名称</th>'
		+'</tr></thead><tbody>';	
		for(var j=0;j<data.qmData.length;j++){
			table+='<tr><td class="tdl">'+data.qmData[j].QUEUE+'</td><td>'+data.qmData[j].TYPE+'</td><td>'+data.qmData[j].IPPROCS
			+'</td><td>'+data.qmData[j].OPPROCS+'</td><td>'+data.qmData[j].CURDEPTH+'</td><td>'+data.qmData[j].MAXDEPTH+'</td><td>'+data.qmData[j].MAXMSGL
			+'</td><td>'+isEnabled(data.qmData[j].PUT)+'</td><td>'+isEnabled(data.qmData[j].GET)+'</td><td>'+data.qmData[j].CLUSTER
			+'</td></tr>';
		}
		 table +='</tbody></table>';
		$("div[name^='body_"+i+data.qmName+"']").append(table); //拼装页面        
	}
	
}
function isEnabled(a){
	return 	a=='ENABLED'?'启用':'停用';
}
</script>


</body></html>